<style>
    .footer-home{display: none}
    #container{position: fixed;height: 100%;width: 100%;  }
    #tip {position: fixed;background-color: #fff;border: 1px solid #ccc;border-radius: 3px;height: 35px; padding: 0 5px;line-height: 35px;  left: 55px;  bottom: 20px;  display: none;  }
    @media screen and (min-width:640px){html{font-size:70px!important;}}
    .header{height:1.5rem;line-height:1.5rem;}
</style>
<link rel="stylesheet" type="text/css" href="resource/css/main.css?v=<?php echo JS_VER; ?>">
<script type="text/javascript"  src="resource/js/rem.js?v=<?php echo JS_VER; ?>"></script>
<header>
    <a href="index.php">
        <i class="iconfont icon-xialalan-copy"></i>
    </a>
    <span>语音导游</span>
</header>
<!--地图容器-->
<div id="container"></div>
<div id="tip"></div>
<input type="hidden" name="my_location" value="" class="my_location" id="my_location" >
<!--<div class="address-select">
    <ul class="select-list">
        <li>
            <i class="radio orange-btn"></i><span>选车：</span><input type="text" placeholder="请选择您想要移动车商店" id="send-address" />
            <input type="hidden" id="click-address" />
            <input type="hidden" id="carXY" value="">
        </li>
        <li class="noborder">
            <i class="radio orange-btn blue-back"></i><span>送至：</span><input type="text" placeholder="请选择您的收货地址" id="my-address" />
        </li>
    </ul>
    <div class="map-btn" id="select_car_id" >
        <a>挑选商品</a>
    </div>
</div>-->

<!--车辆信息-->
<!--<<div class="allmap">
    <div class="play_autio" style="display: none;" onclick="smollbtn()">
        <i class="iconfont icon-zanting" ></i>
        <span id="dy_title">“黄果树大瀑布语音导游”</span>
        <i class="iconfont icon-guanbi fr" onclick="close()"></i>
    </div>
</div>-->
<!--弹窗样式-->
<div class="video_box" style="display: none;">
    <div class="video_top"><span id="ticket_title">花卉远景区</span><i class="iconfont icon-guanbi fr"></i></div>
    <div class="video_foot">
        <div class="video_pic fl">
            <img src="" id="tk_thumb" alt="景点缩略图"/>
        </div>
        <div class="video_info fr">
            <p class="p-3"><span id="tk_subtitle">黄果树瀑布，即黄果树大瀑布。古称白水河瀑布、亦名"黄葛墅"瀑布
                或“黄桷树”瀑布，因本地广泛分布着“榕什么被省略了”</span></p>
            <a  class="star_play" id="play" onclick="playpause()"><i class="iconfont icon-bofanganniu"></i>
                <span>播放</span>
            </a>
            <a href="" id="xq"><i class="iconfont icon-xiangqing"></i>详情</a>
        </div>
    </div>
    <audio  id="js-video">
        <!--<source src="" id="audio" type="audio/mp3">-->
    </audio>
</div>
<script type="text/javascript" src="resource/js/jquery.min.js?v=<?php echo JS_VER; ?>"></script>
<script src="//webapi.amap.com/maps?v=1.4.3&key=e5c438490a60083b210b012342ff9339"></script>
<script src="//cache.amap.com/lbs/static/es5.min.js"></script>
<script>

    var my_audio= document.getElementById("js-video");
    function playpause() {
        if(my_audio.paused){
            //console.log($("#audio").attr('src'));
            $("#play").find("i").removeClass("icon-bofanganniu").addClass("icon-zanting");
            $("#play").children("span").html('暂停');
            my_audio.play();


        }else {
            $("#play").find("i").removeClass("icon-zanting").addClass("icon-bofanganniu");
            $("#play").children("span").html('播放');
            my_audio.pause();
        }
    }
    $(".icon-guanbi").click(function () {
        $("#js-video").empty();
        $("#play").find("i").removeClass("icon-zanting").addClass("icon-bofanganniu");
        $("#play").children("span").html('播放');
        my_audio.pause();
        my_audio.load();
       // $(".play_autio").show();
        $(".video_box").hide();
    });
    /*缩小*/
    function smollbtn() {
        if(my_audio.paused){
            $(".play_autio").find("i").removeClass("icon-zanting").addClass("icon-bofanganniu");
            my_audio.play();
        }else {
            $(".play_autio").find("i").removeClass("icon-bofanganniu").addClass("icon-zanting");
            my_audio.pause();
        }
    }

    /*暂停*/
    $(".play_autio>i:last-child").click(function () {
        my_audio.pause();
        $(this).parent().hide();
        event.stopPropagation();
    });
</script>
<script>
    var map, geolocation;
    //加载地图，调用浏览器定位服务
    map = new AMap.Map('container', {
        resizeEnable: true,
        zoom :10  //缩放级别
    });
    map.plugin('AMap.Geolocation', function() {
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, //是否使用高精度定位，默认:true
            timeout: 100000, //超过10秒后停止定位，默认：无穷大
            buttonOffset: new AMap.Pixel(15, 25), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: true,
            buttonPosition: 'RB'
        });

//        console.log(ding_wei());

        geolocation.getCurrentPosition();
        map.addControl(geolocation);

//        AMap.event.addListener(map, 'click', getLnglat);
        AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
        AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
    });

    function ding_wei() {
        if (AMap.UA.ios) {
            //使用远程定位，见 remogeo.js
            var remoGeo = new RemoGeoLocation();
            //替换方法
            navigator.geolocation.getCurrentPosition = function() {
                return remoGeo.getCurrentPosition.apply(remoGeo, arguments);
            };
            //替换方法
            navigator.geolocation.watchPosition = function() {
                return remoGeo.watchPosition.apply(remoGeo, arguments);
            };
        }
    }

    //获取经纬度
    function onComplete(data) {
        var str = ['定位成功'];
        str.push('经度：' + data.position.getLng()); //经度
        str.push('纬度：' + data.position.getLat()); //纬度

        document.getElementById("my_location").value = data.position.getLng()+","+data.position.getLat(); //我的经纬度
        if(data.accuracy) {
            str.push('精度：' + data.accuracy + ' 米');
        } //如为IP精确定位结果则没有精度信息
        str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));

        var marker_location = [{
            icon: '<?php echo AST_URL;?>images/location.png',
            position: [data.position.getLng(), data.position.getLat()]
        }];


        //定位点
        marker_location.forEach(function(marker) {
            marker = new AMap.Marker({
                map: map,
               // icon: marker.icon,
                size: new AMap.Size(20, 40), //图标大小
                position: [marker.position[0], marker.position[1]],
                imageOffset: new AMap.Pixel(0, 0),
                draggable: true,
                cursor: 'move',
                raiseOnDrag: true,

            });
            marker.on('dragend', function(e) {
                //拖拽图标的点击坐标
                var carXY = [e.lnglat.getLng(), e.lnglat.getLat()];
                regeocoder(carXY);
                //AMap.event.addListener(auto, "select", select); //注册监听，当选中某条记录时会触发
                function select(e) {
                    if(e.poi && e.poi.location) {
                        map.setZoom(15);
                        map.setCenter(e.poi.location);
                    }
                }
            });

        });

        //车点
        var markers=<?php echo $output['movecar'] ?>;
        markers.forEach(function(marker) {
            var tk_title = marker.tk_title;
            var tk_thumb = marker.tk_thumb;
            var tk_subtitle = marker.tk_subtitle;
            var audio = marker.audio;
            var url = marker.url;
            var icon=marker.icon;
            marker = new AMap.Marker({
                map: map,
                icon: marker.icon,
                size: new AMap.Size(20, 40), //图标大小
                position: [marker.position[0], marker.position[1]],
                imageOffset: new AMap.Pixel(-64, -128)
            });

            marker.on('click', function(e) {
                //$(".map-header").slideDown(500);
                $(".video_box").slideDown(500);
                $("#js-video").empty();
                var carXY = [e.lnglat.getLng(), e.lnglat.getLat()];
                regeocoder_1(carXY);
                //AMap.event.addListener(auto, "select", select); //注册监听，当选中某条记录时会触发
                function select(e) {
                    if(e.poi && e.poi.location) {
                        map.setZoom(15);
                        map.setCenter(e.poi.location);
                    }
                }
                var lnglat = new AMap.LngLat(data.position.getLng(), data.position.getLat());
                var _distance = parseInt(lnglat.distance([e.lnglat.getLng(), e.lnglat.getLat()]));
                //document.getElementById("carXY").value = [data.position.getLng(), data.position.getLat()]; //我的经纬度
                //$("#car_icon").attr('src',icon);
                console.log(tk_thumb);
                $('#ticket_title').text(tk_title);
                $('#tk_thumb').attr('src',tk_thumb);
                $("#tk_subtitle").text(tk_subtitle);
                $("#js-video").append($("<source src=\""+ audio +"\">"));
                $("#dy_title").text(tk_title+'语音播报');
                //$("#play").attr('href',audio);
                $("#xq").attr('href',url);
                //document.getElementById("car_no").innerHTML = car_no; //车牌号
                //document.getElementById("distance").innerHTML = _distance; //距离
                //$('#select_car_id').attr("value",car_id); //移动车Id
                var lnglatXY = [data.position.getLng(), data.position.getLat()]; //已知点坐标
                regeocoder(lnglatXY);
            });
        });
    }


    //获取地理信息
    function regeocoder_1(lnglatXY) { //逆地理编码
        var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all"
        });
        geocoder.getAddress(lnglatXY, function(status, result) {
            if(status === 'complete' && result.info === 'OK') {
                geocoder_CallBack_1(result);
            }
        });
    }

    function geocoder_CallBack_1(data) {
        var address = data.regeocode.formattedAddress; //返回地址描述
        //document.getElementById("send-address").value = address;
        //document.getElementById("car_address").innerHTML = address;
    }

    function regeocoder(lnglatXY) { //逆地理编码
        var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all"
        });
        geocoder.getAddress(lnglatXY, function(status, result) {
            if(status === 'complete' && result.info === 'OK') {
                geocoder_CallBack(result);
            }
        });
    }

    function geocoder_CallBack(data) {
        var address = data.regeocode.formattedAddress; //返回地址描述
        console.log(address);
        //document.getElementById("my-address").value = address
    }
    //解析定位错误信息
    function onError(data) {
        var tip = document.getElementById('tip');
        tip.style.display = 'block';
        tip.innerHTML = '定位失败';
//        document.getElementById('tip').innerHTML = '定位失败';
    }
</script>